<template>
  <el-table
    v-loading="loading"
    :border="border"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    :max-height="maxHeight"
    :row-key="rowKey"
		@select='selectall'
		@select-all='selectall'
    @selection-change="selectionChange">
    <el-table-column
      v-if="canSelect"
      type="selection"
			align='center'
      width="55">
    </el-table-column>
    <template v-for="item in inits" >
      <el-table-column
        :fixed="item.fixed ? item.fixed : false"
        align="center"
        :show-overflow-tooltip="item.notooltip ? false : true"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width">
        <template slot-scope="scope">
          <span v-if="item.fontType" :class="[scope.row.fontType ? `font-color-${scope.row.fontType[item.prop]}` : '', item.fontBold ? 'font-weight-bold' : '']">{{scope.row[item.prop]}}</span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
    </template>
    <el-table-column
      v-if="haveOperation"
      fixed="right"
      align="center"
      :label="operation.label"
      :width="operation.width">
    <template slot-scope="scope">
      <slot :rowScope="scope"></slot>
    </template>
  </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableData: Array,
    inits: Array,
    canSelect: Boolean,
    operation: Object,
    rowKey: String,
    maxHeight: String,
    border: Boolean,
    loading: Boolean
  },
  computed: {
    haveOperation () {
      return this.operation && true
    }
  },
  methods: {
    selectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    toggleRowSelection(row, selected) {
      this.$refs.multipleTable.toggleRowSelection(row, selected)
    },
		selectall(row){
			this.$emit('select',row)
		}
  }
}
</script>

<style>
  .font-color-success {
    color: #67c23a;
  }
  .font-color-danger {
    color: #f56c6c;
  }
  .font-color-warning {
    color: #e6a23c;
  }
  .font-weight-bold {
    font-weight: 600;
  }
</style>
